<template>
  <div class="page-container">
    <!-- 主容器 -->
    <div class="main-container">
      <!-- 个人信息区域 -->
      <a-spin tip="加载中..." :spinning="spinning2">
        <a-card class="left-card">
          <!-- 个人资料 -->
          <div class="profile-section">
            <a-avatar size="large" :src="avatarUrl" class="avatar"/>
            <div class="profile-info">
              <h2 class="username">{{ nickName }}</h2>
              <p class="user-stats">{{ articleCount }} 原创<span class="user-line">|</span>{{ fanCount }} 粉丝</p>
            </div>
          </div>

          <!-- 数据统计 -->
          <a-row :gutter="16" class="stats-grid">
            <a-col :span="6" v-for="(stat, index) in stats" :key="index" class="stat-item">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </a-col>
          </a-row>
        </a-card>
      </a-spin>

      <div class="article-page">
        <!-- 导航标签栏 -->
        <a-tabs default-active-key="1" class="tabs" @change="handleTabChange" v-model:activeKey="activeTabKey">
          <a-tab-pane tab="文章" :key="1">
            <!-- 筛选栏 -->
            <div class="filter-bar">
              <a-input-search class="search" placeholder="搜索文章" style="margin-right: 10px;"
                              @search="searchArticle"/>
              <a-select class="select" v-model:value="queryForm.status" style="width: 80px;margin-right: 10px;"
                        @change="handleStatusChange">
                <a-select-option :value="-1">全部</a-select-option>
                <a-select-option :value="0">草稿</a-select-option>
                <a-select-option :value="1">发布</a-select-option>
                <a-select-option :value="2">下架</a-select-option>
              </a-select>
              <a-checkbox-group v-model:value="queryForm.type" style="width: 270px;display: flex;flex-wrap: nowrap"
                                @change="handleSortChange">
                <a-checkbox value="1createTime" name="type">按创作时间</a-checkbox>
                <a-checkbox value="1viewCount" name="type">按访问量</a-checkbox>
              </a-checkbox-group>
            </div>
            <a-spin tip="加载中..." :spinning="spinning1">
              <div class="content">
                <div class="card-container" @click="goDetail(article)" v-for="article in articleList">
                  <div class="content">
                    <div class="left-info">
                      <div class="card-time">
                        <CalendarOutlined/>
                        <span v-if="article.status == 0">草稿</span>
                        <span v-else-if="article.status == 1">发布于 {{ article.createTime }}</span>
                        <span v-else-if="article.status == 2">下架</span>
                        <div class="card-title">{{ article.title }}</div>
                      </div>
                      <div class="card-interact">
                        <span>
                          <svg class="icon" aria-hidden="true" width="16" height="16">
                            <use xlink:href="#icon-liulan"></use>
                          </svg>
                          <span>&nbsp;{{ article.viewCount }} 浏览</span>
                        </span>&nbsp;&nbsp;
                        <span>
                          <svg class="icon" aria-hidden="true" width="16" height="16">
                            <use xlink:href="#icon-pinglun"></use>
                          </svg>
                          <span>&nbsp;{{ article.commentCount }} 评论</span>
                        </span>
                      </div>
                    </div>
                    <div class="card-tag">
                      <div class="tag-item" v-for="(item, index) in article.articleTagList" :key="item.id">
                        <svg v-if="index % 2 == 0" class="icon" aria-hidden="true" width="16" height="16">
                          <use xlink:href="#icon-biaoqian1"></use>
                        </svg>
                        <svg v-if="index % 2 == 1" class="icon" aria-hidden="true" width="16" height="16">
                          <use xlink:href="#icon-biaoqian"></use>
                        </svg>
                        &nbsp;
                        <span>{{ item.tagName }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="btn">
                    <svg @click.stop="goEdit(article)" t="1755843068356" class="icon" viewBox="0 0 1024 1024"
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="10144" width="200" height="200">
                      <path
                          d="M775.84 392.768l-155.2-172.352L160.768 643.264l-38.368 187.936 190.56-12.832zM929.952 229.952l-131.2-150.944-0.288-0.32a16 16 0 0 0-22.592-0.96l-131.168 120.576 155.168 172.352 128.832-118.464a15.936 15.936 0 0 0 1.248-22.24zM96 896h832v64H96z"
                          p-id="10145"></path>
                    </svg>
                  </div>
                </div>
              </div>
              <a-pagination @change="handlePageChange" style="text-align: center;margin-top: 20px;"
                            v-model:current="queryForm.pageModel.pageNow" :total="total"
                            :pageSize="queryForm.pageModel.pageSize"
                            show-less-items/>
            </a-spin>
          </a-tab-pane>
          <a-tab-pane tab="粉丝" :key="2">
            <a-list item-layout="horizontal" :data-source="fanList">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta
                      description="Ant Design, a design language for background applications, is refined by Ant UED Team">
                    <template #title>
                      <a href="https://www.antdv.com/">{{ item.title }}</a>
                    </template>
                    <template #avatar>
                      <a-avatar src="https://joeschmoe.io/api/v1/random"/>
                    </template>
                  </a-list-item-meta>
                  <a-button style="border-radius: 20px;">关注</a-button>
                </a-list-item>
              </template>
            </a-list>
          </a-tab-pane>
          <a-tab-pane tab="关注" :key="3">
            <a-list item-layout="horizontal" :data-source="fanList">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta
                      description="Ant Design, a design language for background applications, is refined by Ant UED Team">
                    <template #title>
                      <a href="https://www.antdv.com/">{{ item.title }}</a>
                    </template>
                    <template #avatar>
                      <a-avatar src="https://joeschmoe.io/api/v1/random"/>
                    </template>
                  </a-list-item-meta>
                  <a-button style="border-radius: 20px;">已关注</a-button>
                </a-list-item>
              </template>
            </a-list>
          </a-tab-pane>
          <a-tab-pane tab="收藏" :key="4">
            <!-- 筛选栏 -->
            <div class="filter-bar">
              <a-input-search class="search" placeholder="搜索文章" style="margin-right: 10px;"
                              @search="searchArticle"/>
<!--              <a-select class="select" v-model:value="queryForm.status" style="width: 80px;margin-right: 10px;"-->
<!--                        @change="handleStatusChange">-->
<!--                <a-select-option :value="-1">全部</a-select-option>-->
<!--                <a-select-option :value="1">发布</a-select-option>-->
<!--                <a-select-option :value="2">下架</a-select-option>-->
<!--              </a-select>-->
              <a-checkbox-group v-model:value="queryForm.type" style="width: 270px;display: flex;flex-wrap: nowrap"
                                @change="handleSortChange">
                <a-checkbox value="1createTime" name="type">按创作时间</a-checkbox>
                <a-checkbox value="1viewCount" name="type">按访问量</a-checkbox>
              </a-checkbox-group>
            </div>
            <a-spin tip="加载中..." :spinning="spinning1">
              <div class="content">
                <div class="card-container" @click="goDetail(article)" v-for="article in articleList">
                  <div class="content">
                    <div class="left-info">
                      <div class="card-time">
                        <CalendarOutlined/>
                        <span v-if="article.status == 1">发布于 {{ article.createTime }}</span>
                        <span v-else-if="article.status == 2">下架</span>
                        <div class="card-title">{{ article.title }}</div>
                      </div>
                      <div class="card-interact">
                        <span>
                          <svg class="icon" aria-hidden="true" width="16" height="16">
                            <use xlink:href="#icon-liulan"></use>
                          </svg>
                          <span>&nbsp;{{ article.viewCount }} 浏览</span>
                        </span>&nbsp;&nbsp;
                        <span>
                          <svg class="icon" aria-hidden="true" width="16" height="16">
                            <use xlink:href="#icon-pinglun"></use>
                          </svg>
                          <span>&nbsp;{{ article.commentCount }} 评论</span>
                        </span>
                      </div>
                    </div>
                    <div class="card-tag">
                      <div class="tag-item" v-for="(item, index) in article.articleTagList" :key="item.id">
                        <svg v-if="index % 2 == 0" class="icon" aria-hidden="true" width="16" height="16">
                          <use xlink:href="#icon-biaoqian1"></use>
                        </svg>
                        <svg v-if="index % 2 == 1" class="icon" aria-hidden="true" width="16" height="16">
                          <use xlink:href="#icon-biaoqian"></use>
                        </svg>
                        &nbsp;
                        <span>{{ item.tagName }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="btn">
                    <svg @click.stop="cancelCollect(article)" t="1755842547060" class="icon" viewBox="0 0 1024 1024"
                         version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6002" width="200" height="200">
                      <path
                          d="M551.5 137.6l94.7 191.8c6.4 13.1 18.9 22.1 33.3 24.2l211.6 30.8c24.2 3.4 41 25.8 37.6 50-1.4 9.7-5.9 18.6-12.9 25.5L762.7 609.2c-10.4 10.2-15.2 24.8-12.8 39.2l36.2 210.8c4.1 24.1-12 47-36.1 51.1-9.6 1.6-19.5 0.1-28.1-4.5l-189.3-99.5c-12.9-6.8-28.3-6.8-41.2 0l-189.3 99.5c-21.6 11.4-48.4 3.1-59.8-18.6-4.5-8.6-6.1-18.5-4.5-28.1L274 648.3c2.5-14.4-2.3-29-12.8-39.2l-153-149.2c-17.5-17.1-17.9-45.1-0.8-62.6 6.8-7 15.8-11.5 25.5-12.9l211.6-30.8c14.4-2.1 26.9-11.1 33.3-24.2l94.7-191.8c10.9-21.8 37.5-30.7 59.4-19.8 8.4 4.3 15.4 11.3 19.6 19.8z"
                          p-id="6003"></path>
                      <path
                          d="M281.6 941.7c-7.5 0-15-1.1-22.3-3.4-19.1-6-34.8-19-44.2-36.7-7.6-14.5-10.3-31.4-7.6-47.6l36.2-210.8c0.8-4.4-0.7-8.8-3.9-11.9L86.7 482c-29.7-28.8-30.3-76.4-1.4-106.1 11.6-11.9 27-19.6 43.3-21.9L340 323.1c4.4-0.7 8.2-3.4 10.2-7.4L444.8 124c9-18.1 24.4-31.4 43.4-37.8s39.4-4.9 57.4 4.1c14.4 7.2 26.3 19.1 33.5 33.5l0.1 0.2 94.7 191.8c2 4 5.8 6.7 10.2 7.4L895.8 354c19.7 2.8 37.3 13.2 49.3 29.2s17.1 35.8 14.3 55.6c-2.3 16.5-10.2 31.8-22 43.3l-153 149.2c-3.2 3.1-4.6 7.6-3.9 11.9L816.7 854c7 40.7-20.5 79.6-61.3 86.7-16.2 2.7-33.2 0.1-47.7-7.5l-189.3-99.6c-4-2-8.5-2-12.5 0L316.4 933c-10.9 5.8-22.8 8.7-34.8 8.7zM512 144c-1.8 0-3.2 0.4-4.3 0.7-1.9 0.7-5.5 2.4-7.7 6.7L405.4 343c-10.9 22.1-32 37.5-56.5 41.1l-211.7 30.8c-3.1 0.5-5.8 1.8-7.9 4-5.1 5.3-5 13.8 0.3 18.9l153.1 149.3c17.8 17.2 25.8 42.1 21.7 66.4l-36.2 210.8c-0.5 2.9 0 6 1.3 8.6 2.3 4.3 6 5.9 7.9 6.6 1.9 0.7 6 1.4 10.2-0.9L477.1 779c21.8-11.5 48-11.5 69.8 0l189.3 99.5c2.6 1.3 5.7 1.8 8.7 1.3 7.2-1.2 12.1-8.2 10.8-15.5l-36.2-210.8c-4.2-24.4 3.9-49.2 21.7-66.5l153.1-149.2c2.2-2.1 3.5-4.8 3.9-7.7 0.7-4.8-1.3-8.3-2.5-10-1.3-1.7-4.1-4.5-8.8-5.2l-211.8-30.8c-24.5-3.6-45.6-18.9-56.5-41.1L524 151.3c-1.3-2.6-3.4-4.6-6-5.9-2.2-1.1-4.2-1.4-6-1.4z"
                          fill="#39C9BF" p-id="6004"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </a-spin>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import {CalendarOutlined} from "@ant-design/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {findArticlePage} from "@/api/article";
import {useRouter} from "vue-router";
import {findCollectArticleList, findCreateInfo} from "@/api/createCenter.js";

const router = useRouter();
const spinning1 = ref(false);
const spinning2 = ref(false);
const activeTabKey = ref(1);
const articleList = ref([
  {
    title: 'hello world',
    img: 'https://picsum.photos/200/300?random=1',
    time: '2023-08-08 12:11:05',
    viewCount: 12,
    commentCount: 12,
    tagList: [
      {id: 1, tagName: 'HTML'}
    ],
  }
]);
const total = ref(0);

const fanList = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
];
// 图片资源
const avatarUrl = ref("");
const nickName = ref("");
const fanCount = ref(0);
const articleCount = ref(0);

// 统计数据
const stats = ref([
  {value: '0', label: '阅读量'},
  {value: '0', label: '点赞数'},
  {value: '0', label: '总字数'},
  {value: '0', label: '收藏数'}
]);

const queryForm = reactive({
  status: -1,
  pageModel: {
    pageNow: 1,
    pageSize: 10,
    query: {
      status1: '',
      create_user_id1: localStorage.getItem("userId"),
    },
    sort: [],
  },
})

const getArticleData = () => {
  spinning1.value = true;
  if (queryForm.status === -1) {
    queryForm.pageModel.query.status1 = '';
  } else {
    queryForm.pageModel.query.status1 = queryForm.status;
  }
  findArticlePage(queryForm).then(res => {
    if (res.code == 200) {
      articleList.value = res.data.list.dataList;
      total.value = res.data.list.total;
    }
  }).catch(err => {
  }).finally(() => {
    spinning1.value = false;
  })
}
// 跳转文章详情
const goDetail = (item) => {
  router.push({
    name: 'article',
    query: {
      id: item.id,
    },
  });
};
// 跳转编辑页面
const goEdit = (item) => {
  router.push({
    path: '/article/edit',
    query: {
      id: item.id,
      pageType: 1,
      backPath: '/createCenter'
    },
  });
}

const handleStatusChange = () => {
  if (activeTabKey.value === 1) {
    getArticleData();
  } else if (activeTabKey.value === 4) {
    getCollectArticle();
  }
}

const handleSortChange = (e) => {
  queryForm.pageModel.sort = e;
  if (activeTabKey.value === 1) {
    getArticleData();
  } else if (activeTabKey.value === 4) {
    getCollectArticle();
  }
}

const searchArticle = (e) => {
  queryForm.pageModel.query.title0 = e;
  if (activeTabKey.value === 1) {
    getArticleData();
  } else if (activeTabKey.value === 4) {
    getCollectArticle()
  }
}
// 取消收藏
const cancelCollect = () => {
}

const handleTabChange = (e) => {
  console.log(e)
  if (e === 1) {
    getArticleData();
  } else if (e === 2) {
    // todo
  } else if (e === 3) {

  } else if (e === 4) {
    // 收藏
    getCollectArticle();
  }
}
// 获取收藏的文章
const getCollectArticle = () => {
  queryForm.pageModel.query.create_user_id1 = '';
  findCollectArticleList(queryForm).then(res => {
    if (res.code === 200) {
      articleList.value = res.data.list.dataList;
      total.value = res.data.list.total;
    }
  })
}

const handlePageChange = (e) => {
  getArticleData();
}

const getUserCreateInfo = () => {
  spinning2.value = true;
  findCreateInfo().then(res => {
    if (res.code === 200) {
      articleCount.value = res.data.articleCount;
      fanCount.value = res.data.fanCount;
      avatarUrl.value = res.data.avatar;
      nickName.value = res.data.nickName;
      stats.value = ([
        {value: res.data.viewCount, label: '阅读量'},
        {value: res.data.likeCount, label: '点赞数'},
        {value: res.data.wordCount, label: '总字数'},
        {value: res.data.collectCount, label: '收藏数'}
      ]);
    }
  }).catch(err => {
    console.log(err)
  }).finally(() => {
    spinning2.value = false;
  })
}

onMounted(() => {
  getArticleData();
  getUserCreateInfo();
})
</script>

<style scoped lang="less">
.page-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 24px;
  padding-top: 15vh;
}

.main-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}

/* 左侧卡片样式 */
.left-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.profile-section {
  display: flex;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.avatar {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  border: 2px solid #e6f7ff;
}

.username {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #1f2329;
}

.user-stats {
  font-size: 14px;
  color: #86909c;
  margin: 0;
}

.stats-grid {
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.stat-item {
  text-align: center;
  padding: 0 8px;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #1f2329;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #4e5969;
  margin-bottom: 2px;
}

.stat-change {
  font-size: 12px;
  color: #86909c;
}

/* 右侧内容样式 */
.right-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.right-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #1f2329;
}

.more-link {
  color: #1890ff;
  font-size: 14px;
}

.ticket-count {
  padding: 16px 24px;
  margin: 0;
  font-size: 14px;
  color: #4e5969;
}

.date-grid {
  padding: 0 24px 24px;
}

.date-text {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #1f2329;
}

.action-btn {
  width: 100%;
}

.create-link {
  color: #fa8c16 !important;
  padding: 0 !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .main-container {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    padding: 16px;
  }

  .stat-item {
    margin-bottom: 16px;
  }

  .filter-bar {
    flex-wrap: wrap;

    .select {
      margin-bottom: 10px;
    }

    .search {
      margin-bottom: 10px;
    }
  }
}

.user-line {
  color: #d8d6d6;
  padding: 0 10px;
}

.article-page {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 20px;
}

.tabs {
  margin-bottom: 20px;
}

.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .ant-dropdown-link {
    margin-right: 20px;
  }
}

.sort-btn {
  margin-right: 20px;
  color: #333;
}

.sort-btn.active {
  color: #f5222d;
}

.card-container {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: all 0.1s linear;
  cursor: pointer;
  display: flex;
  flex-direction: v-bind(flexDirection);
  margin-bottom: 10px;
  align-items: center;
  justify-content: space-between;

  &:last-child {
    margin-bottom: 0;
  }

  &:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  }

  .content {
    width: 50%;
    height: 100%;
    padding: 5px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media (max-width: 768px) {
      width: 100%;
      height: 45%;
    }

    .card-time {
      font-size: 12px;
      color: var(--text-color3);
    }

    .card-title {
      font-size: 20px;
      font-weight: bold;
      margin: 12px 0;
    }

    .card-interact {
      font-size: 12px;
      color: var(--text-color3);
      margin-bottom: 15px;
      display: flex;

      span:first-child,
      span:last-child {
        display: flex;
        align-items: center;
      }
    }

    .card-tag {
      display: flex;
      justify-content: left;
      align-items: center;

      .tag-item {
        font-size: 14px;
        border-radius: 5px;
        padding: 3px 5px;
        background-color: #eee;
        color: #9d9d9d;
        display: flex;
        align-items: center;
        transition: all 0.3s linear;

        &:hover {
          background-color: #ffa500;
          color: #fff;
        }
      }

      .tag-item {
        margin-right: 10px;
      }

      .tag-item:last-child {
        margin-right: 0;
      }
    }
  }
}

.btn {
  svg {
    font-size: 30px;
    margin-right: 15px;
    fill: #99E3DE;
    transition: all 0.3s linear;

    &:hover {
      fill: #1890ff !important;
    }
  }
}
</style>
